<template>
    <div class="mainBox">
        <div class="stepss">
            <el-steps :space="200" :active="allObj.orderStatus-1" finish-status="success"  align-center>
                <el-step title="提交订单"></el-step>
                <el-step title="支付订单"></el-step>
                <el-step title="平台发货"></el-step>
                <el-step title="确认收货"></el-step>
                <el-step title="完成评价"></el-step>
            </el-steps>
        </div>
        <div class="borBox1">
            <div class="title1">
                <div class="left">
                    <span class="el-icon-warning"></span>
                    <span>当前订单状态：{{allObj.orderS}}</span>
                </div>
                <div class="right">
                    <el-button v-if="allObj.orderStatus==1" type="primary" size='mini' plain @click="delFn">删除订单</el-button>
                    <el-button v-if="allObj.orderStatus==3" type="primary" size='mini' plain @click="deliFn">订单发货</el-button>
                    <el-button v-if="allObj.orderStatus==2 ||allObj.orderStatus==3" type="primary" size='mini' @click='changeFn(1)' plain>修改收货人信息</el-button>
                    <el-button v-if="allObj.orderStatus==2 ||allObj.orderStatus==3" type="primary" size='mini' plain @click="MoneyFn(4)">修改运费</el-button>
                    <el-button v-if="allObj.orderStatus==2 ||allObj.orderStatus==3" type="primary" size='mini' plain @click="delFn">取消订单</el-button>
                    <el-button v-if="allObj.orderStatus>=4" type="primary" size='mini' plain @click="trackFn(2)">订单跟踪</el-button>
                    <el-button type="primary" size='mini' plain @click="noteFn(3)">订单备注</el-button>
                </div>
                <div class="clear"></div>
            </div>
            <div class="tableBox">
                <div class="box1">
                    <div class="tit">
                        <span class="el-icon-collection-tag"></span>
                        <span>基本信息</span>
                    </div>
                    <el-descriptions direction="vertical" :column="5" border 
                    :contentStyle="{'text-align': 'center'}"
                    :labelStyle="{'text-align': 'center'}"
                    >
                        <el-descriptions-item
                        v-for="(item,index) in tableList1"
                        :key="index"
                        :label="item.label">{{item.val}}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="box2">
                    <div class="tit">
                        <span class="el-icon-collection-tag"></span>
                        <span>收货人信息</span>
                    </div>
                    <el-descriptions direction="vertical" :column="5" border 
                    :contentStyle="{'text-align': 'center'}"
                    :labelStyle="{'text-align': 'center'}"
                    >
                        <el-descriptions-item
                        v-for="(item,index) in tableList2"
                        :key="index"
                        :label="item.label">{{item.val}}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="box3">
                    <div class="tit">
                        <span class="el-icon-collection-tag"></span>
                        <span>商品信息</span>
                    </div>
                    <el-table
                        :data="tableList3"
                        border
                        style="width: 100%">
                        <el-table-column
                        align='center'
                        header-align='center'
                        label="商品图片">
                        <template slot-scope="scope">
                            <div class="imgBox">
                                <img :src="scope.row.picUrl" alt="">
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column
                        align='center'
                        header-align='center'
                        v-for="(item,index) in headerData"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label">
                        </el-table-column>
                    </el-table>
                    <div class="right pBox1">
                        <span>合计：</span>
                        <span>{{allObj.allPrice}}</span>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="box4">
                    <div class="tit">
                        <span class="el-icon-collection-tag"></span>
                        <span>费用信息</span>
                    </div>
                    <el-descriptions direction="vertical" :column="4" border 
                    :contentStyle="{'text-align': 'center'}"
                    :labelStyle="{'text-align': 'center'}"
                    >
                        <el-descriptions-item
                        v-for="(item,index) in tableList4"
                        :key="index"
                        :label="item.label">￥{{item.val}}</el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
        </div>
        <div>
            <el-dialog
                :title="type==1?'修改收货人信息':type==2?'订单跟踪':'订单备注'"
                :visible.sync="centerDialogVisible1"
                :width="type!=1?'30%':'50%'">
                <div v-if="type==1">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="收件人名称" prop="username">
                            <el-input v-model="ruleForm.username"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="tel">
                            <el-input v-model="ruleForm.tel"></el-input>
                        </el-form-item>
                        <el-form-item label="邮政编码" prop="zip">
                            <el-input v-model="ruleForm.zip"></el-input>
                        </el-form-item>
                        <el-form-item label="所在地区" prop="qu">
                            <el-select v-model="ruleForm.sheng" placeholder="请选择省份" style="width:175px" clearable @change="pitchFn1()">
                                <el-option
                                    v-for="item in citydata"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                            <el-select v-if="isCity" v-model="ruleForm.shi" placeholder="请选择城市" style="width:175px" clearable @change="pitchFn2()" :disabled="shiList.length==0">
                                <el-option
                                    v-for="item in shiList"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                            <el-select v-model="ruleForm.qu" placeholder="请选择区/县" style="width:175px" clearable :disabled="quList.length==0">
                                <el-option
                                    v-for="item in quList"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="detailAdd">
                            <el-input type="textarea" v-model="ruleForm.detailAdd"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="type==2" style="height: 300px;">
                    <el-steps direction="vertical" :active="allObj.orderStatus==4?4:5" finish-status="success">
                        <el-step title="订单已提交，等待付款"></el-step>
                        <el-step title="订单付款成功"></el-step>
                        <el-step :title="'在'+addr1+'发出'"></el-step>
                        <el-step :title="'到达目的地'+addr2+',快件将进行派送'"></el-step>
                        <el-step title="订单代签收"></el-step>
                        <el-step title="订单已签收"></el-step>
                    </el-steps>
                </div>
                <div v-if="type==3">
                    <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="textarea1">
                    </el-input>
                </div>
                <div v-if="type==4">
                    <el-input
                        size="small"
                        v-model="numVal"
                        maxlength="2"
                        clearable>
                    </el-input>
                </div>
                <span v-if="type!=2" slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {orderobj,editorderUser,editnode,cancelOrder,detOrder,editMoney} from "@/api/orderMock"
import {GetCookie} from "@/config/config"
import Suptable from "@/components/Suptable"
import citydata from "@/config/city.json";
export default {
    name:'orderDetail',
    data(){
        //手机号码校验
        var checkemobile = (rule, value, callback) => {
            let res = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!res.test(value) && value.trim()!=''){
                callback(new Error('请输入正确的手机号'));
            }else{
                callback();
            }
        };
        //地区校验
        var ququ = (rule, value, callback) => {
            if(!value){
            return callback(new Error('请选择区/县'));
            }else{
            callback();
            }
        };
        //邮政编码校验
        var checkezip = (rule, value, callback) => {
            let res = /[1-9]\d{5}(?!\d)/;
            if(!res.test(value)){
                callback(new Error('请输入正确的邮政编码'));
            }else{
                callback();
            }
        };
        return{
            allObj:{},
            tableList1:[],
            tableList2:[],
            tableList3:[],
            tableList4:[],
            headerData:[
                {
                    prop:"goodsname",
                    label:"商品名称",
                },
                {
                    prop:"price",
                    label:"商品价格",
                },
                {
                    prop:"num",
                    label:"商品数量",
                },
                {
                    prop:"aPrice",
                    label:"小计",
                },
            ],
            addr1:'',
            addr2:'',
            centerDialogVisible1:false,
            type:1,
            textarea1:'',
            citydata:citydata,
            shiList:[],
            quList:[],
            isCity:true,
            ruleForm:{
                username:'',
                tel:'',
                zip:'',
                sheng:'',
                shi:'',
                qu:'',
                detailAdd:''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在2个字符以上', trigger: 'blur' }
                ],
                tel:[
                    { required: true, trigger: 'blur', validator: checkemobile}
                ],
                zip:[
                    { required: true, trigger: 'blur', validator: checkezip}
                ],
                qu:[
                    { validator: ququ, trigger: 'change',required: true}
                ],
                detailAdd: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ],
            },
            numVal:0,
        }
    },
    mounted(){
        let _self = this;
        _self.orderobjFn()
    },
    components:{Suptable},
    methods:{
        //获取页面数据
        orderobjFn(){
            let _self = this;
            let id = GetCookie("id")
            let data = {id};
            orderobj(data).then(res=>{
                if(res.meta.status==200){
                    let item = res.data.user[0]
                    if(item){
                        let Allprice = 0;
                        for(let items of item.goodsList){
                            Allprice+=items.price*items.num
                        }
                        let arr = ['已取消' ,'待付款', '待发货' ,'已发货','已完成']
                        let orderS = arr[item.orderStatus-1]
                        _self.allObj = {
                            account: item.account,
                            allPrice: "￥"+Allprice.toFixed(2),
                            goodsList: item.goodsList,
                            id: item.id,
                            logistics: item.logistics,
                            orderNote: item.orderNote,
                            orderStatus:item.orderStatus,
                            orderS,
                            ordertype: item.ordertype==1?'正常订单':'秒杀订单',
                            payMethod: item.payMethod==1?'未支付':item.payMethod==2?'微信':'支付宝',
                            preChildren:item.preChildren,
                            reward: item.reward,
                            singleNum:item.singleNum,
                            source: item.source==1?'App':'PC端',
                            time: item.time,
                            userChlidren: item.userChlidren,
                        };
                        //基本信息
                        _self.tableList1 = [
                            {
                                label:'订单编号',
                                val:_self.allObj.id
                            },
                            {
                                label:'用户账号',
                                val:_self.allObj.account
                            },
                            {
                                label:'支付方式',
                                val:_self.allObj.payMethod
                            },
                            {
                                label:'订单来源',
                                val:_self.allObj.source
                            },
                            {
                                label:'订单类型',
                                val:_self.allObj.ordertype
                            },
                            {
                                label:'配送方式',
                                val:_self.allObj.logistics
                            },
                            {
                                label:'物流单号',
                                val:_self.allObj.singleNum
                            },
                            {
                                label:'订单可得优币',
                                val:_self.allObj.reward
                            },
                            {
                                label:'订单可得成长值',
                                val:_self.allObj.reward
                            },
                            {
                                label:'订单备注',
                                val:_self.allObj.orderNote
                            },
                        ];
                        //收货人信息
                        _self.tableList2 = [
                            {
                                label:'收货人',
                                val:item.userChlidren[0].username
                            },
                            {
                                label:'手机号码',
                                val:item.userChlidren[0].tel
                            },
                            {
                                label:'邮政编码',
                                val:item.userChlidren[0].zip
                            },
                            {
                                label:'收货地址',
                                val:item.userChlidren[0].address
                            },
                        ];
                        //货物信息
                        for(let item1 of item.goodsList){
                            let aPrice = item1.num*item1.price;
                            _self.tableList3.push({
                                goodsname:item1.goodsname,
                                picUrl:item1.picUrl, 
                                price:'￥'+item1.price,
                                num:item1.num,
                                aPrice:'￥'+aPrice
                            })
                        };
                        //费用信息
                        _self.tableList4 = [
                            {
                                label:'商品合计',
                                val:Allprice.toFixed(2),
                            },
                            {
                                label:'运费',
                                val:_self.allObj.preChildren.freight,
                            },
                            {
                                label:'优惠券',
                                val:_self.allObj.preChildren.coupons,
                            },
                            {
                                label:'积分抵扣',
                                val:_self.allObj.preChildren.integral,
                            },
                            {
                                label:'活动优惠',
                                val:_self.allObj.preChildren.active,
                            },
                            {
                                label:'折扣金额',
                                val:_self.allObj.preChildren.discount,
                            },
                            {
                                label:'订单总金额',
                                val:(Allprice+(_self.allObj.preChildren.freight)).toFixed(2),
                            },
                            {
                                label:'应付金额',
                                val:(Allprice
                                +(_self.allObj.preChildren.freight)
                                -(_self.allObj.preChildren.coupons)
                                -(_self.allObj.preChildren.integral)
                                -(_self.allObj.preChildren.active)
                                -(_self.allObj.preChildren.discount)).toFixed(2),
                            },
                        ];
                    }
                }
            })

        },
        //订单追踪
        trackFn(num){
            let _self =this;
            _self.type = num;
            _self.centerDialogVisible1 = true;
            _self.addr1=_self.allObj.userChlidren[0].deliAddr;
            _self.addr2=_self.allObj.userChlidren[0].address;
        },
        //订单备注
        noteFn(num){
            let _self =this;
            _self.type = num;
            _self.centerDialogVisible1 = true;
            _self.textarea1 = _self.allObj.orderNote
        },
        //修改收货人信息
        changeFn(num){
            let _self =this;
            _self.type = num;
            _self.centerDialogVisible1 = true;
            let obj = _self.allObj.userChlidren[0]
            let item = obj.address;
            let addr1 = '';
            let addr2 = '';
            let addr3 = '';
            if(item.split(' ').length>2){
                addr1 = item.split(' ')[0];
                addr2 = item.split(' ')[1];
                addr3 = item.split(' ')[2];
                _self.isCity = true
            }else{
                addr1 = item.split(' ')[0];
                addr3 = item.split(' ')[1];
                _self.isCity = false
            }
            _self.ruleForm = {
                username:obj.username,
                tel:obj.tel,
                zip:obj.zip,
                sheng:addr1,
                shi:addr2,
                qu:addr3,
                detailAdd:obj.detailAdd
            }
            _self.shiList = [];
            _self.quList = [];
            for(let item of _self.citydata){
                if(item.name == _self.ruleForm.sheng){
                    _self.shiList = item.children
                }
            };
            if(_self.shiList.length>1){
                for(let item of _self.shiList){
                    if(item.name == _self.ruleForm.shi){
                    _self.quList = item.children
                    }
                }
            }else{
                _self.quList = _self.shiList[0].children
            }
            //去除提示信息
            _self.$nextTick(()=>{
                _self.$refs['ruleForm'].clearValidate()
            })
        },
        //选择省份
        pitchFn1(){
            let _self = this;
            _self.shiList = [];
            _self.ruleForm.shi = '';
            _self.quList = [];
            _self.ruleForm.qu = '';
            for(let item of _self.citydata){
                if(item.name == _self.ruleForm.sheng){
                    _self.shiList = item.children
                }
            }
            if(!_self.ruleForm.sheng == ''){
                if(_self.shiList.length>1){
                    _self.isCity = true
                }else{
                    _self.isCity = false;
                    _self.quList = _self.shiList[0].children
                }
            }else{
                _self.isCity = true;
            }
        },
        //选择城市
        pitchFn2(){
            let _self = this;
            _self.quList = [];
            _self.ruleForm.qu = '';
            for(let item of _self.shiList){
                if(item.name == _self.ruleForm.shi){
                    _self.quList = item.children
                }
            }
        },
        //确定按钮
        submitForm(formName) {
            let _self = this;
            if(_self.type==1){
                _self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let {username,tel,zip,sheng,shi,qu,detailAdd} = _self.ruleForm
                        let address = sheng+' '+shi+' '+qu
                        let data = {
                            id:GetCookie("id"),
                            username,tel,zip,address,detailAdd
                        }
                        editorderUser(data).then(res=>{
                            if(res.meta.status==200){
                                _self.centerDialogVisible1 = false;
                                _self.orderobjFn()
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }else if(_self.type==3){
                let data = {
                    id:GetCookie("id"),
                    orderNote:_self.textarea1
                }
                editnode(data).then(res=>{
                    if(res.meta.status==200){
                        _self.orderobjFn()
                        _self.centerDialogVisible1 = false;
                    }
                })
            }else if(_self.type==4){
                let data = {
                    id:GetCookie("id"),
                    freight:_self.numVal*1
                }
                console.log(data);
                editMoney(data).then(res=>{
                    if(res.meta.status==200){
                        _self.orderobjFn()
                        _self.centerDialogVisible1 = false;
                    }
                })
            }
           
        },
        // 取消按钮
        resetForm(formName) {
            let _self = this;
            _self.centerDialogVisible1 = false;
        },
        //取消订单
        delFn(){
            let _self = this;
            _self.$confirm('是否确定取消订单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    id:GetCookie("id")
                }
                cancelOrder(data).then(res=>{
                    if(res.meta.status==200){
                        _self.orderobjFn()
                    }
                })
            })
        },
        //删除订单
        delFn(){
            let _self = this;
            _self.$confirm('是否确定删除订单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id:GetCookie("id")
                    }
                    detOrder(data).then(res=>{
                        if(res.meta.status==200){
                            _self.$router.go(-1)
                        }
                    })
                })
        },
        //订单发货
        deliFn(){
            let _self = this;
            // _self.$router.push({
            //     name:'delivery',
            //     params:{id:GetCookie("id")}
            // })
            _self.$router.push('/orders/delivery')
        },
        MoneyFn(num){
            let _self = this;
            _self.type = num;
            _self.centerDialogVisible1 = true;
            _self.numVal = _self.allObj.preChildren.freight; 
        }
    },
    watch: {
        numVal(val){
            // 纯数字，不含小数点
            this.numVal = JSON.stringify(val).replace(/\D/g, '');
        }
    },
}
</script>
<style scoped>
.left{
    float: left;
}
.right{
    float: right;
}
.clear{
    clear: both;
}
.mainBox{
    width: 80%;
    margin: 0 auto;
}
.stepss{
    padding: 30px 0;
}
.borBox1{
    border: 1px solid #EBEEF5;
    border-radius: 10px;
}
.title1{
    height: 80px;
    line-height: 80px;
    background: #F2F6FC;
    padding: 0 20px;
    font-size: 20px;
}
.title1>.left{
    color: #F56C6C;
}
.title1 .el-button{
    margin: 0 10px;
}
.tableBox{
    padding: 0 20px;
}
.tit{
    line-height: 60px;
}
.imgBox{
    width: 40%;
    height: 60px;
    margin: 0 auto;
}
.imgBox>img{
    width: 100%;
    height: 100%;
}
.pBox1{
    line-height: 40px;
}
.pBox1>span:nth-child(2){
    color: #F56C6C;
}
</style>